<template>
	<view>
		<view class="head">
			<p>“重要的信息，别错过”</p>
		</view>
		
		
		<view class="main" v-for="item in messageList" :key="item.messageId">
			<navigator url="../../subpages/chat/chat">
			<view class="messagelist">
				<view class="headPic">
					<img :src="item.messagePic">
				</view>
				<view class="messageFont">
					<h3>{{item.messageName}}</h3>
					<p>{{item.messageShow}}</p>
				</view>
				<view>
					<view>{{item.messageTime}}</view>
					<view class="message">
						<p>{{item.messageNotice}}</p>
					</view>
				</view>
			</view>
			</navigator>	
		</view>			
	</view>
</template>

<script>
	export default {
		data(){
			return{
				messageList:[{
					messageId:1,
					messagePic:'',
					messageName:'系统小助手',
					messageShow:'亲，在吗？',
					messageTime:'2022-04-10',
					messageNotice:2
				},
		]
			}
		}
	}
</script>

<style>
.head{
	width: 100%;
	height: 50rpx;
	background-color: #E7C722;
}
.head>p{
	text-align: center;
	letter-spacing: 20rpx;
	font-style:italic;
	font-weight: 700;
}
.main{
	width: 100%;
	height: 120rpx;
	border-bottom: solid 1px darkgray;
}
.headPic{
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	border: dashed 1px black;
	margin-top: 10rpx;
	margin-left: 40rpx;
	float: left;
}
img{
	width: 100rpx;
	height: 100rpx;
}
.messagelist{
	width: 100%;
	height: 118rpx;
}
.messageFont{
	width: 400rpx;
	height: 120rpx;
	float: left;
}
.messageFont>h3{
	width: 100%;
	overflow: hidden;
	padding-left: 20rpx;
	font-size: 40rpx
}
.messageFont>p{
	width: 100%;
	padding-left: 20rpx;
	overflow: hidden;
}
.message{
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background-color: red;
	float: right;
	margin-right: 20rpx;
	margin-top: 30rpx;
	display: block;
}
.message>p{
	text-align: center;
	color: white;
}
</style>
